<!--
 * @description: Description
 * @author: lizlong<94648929@qq.com>
 * @since: 2021-03-04 17:48:28
 * @LastAuthor: lizlong
 * @lastTime: 2021-03-05 10:08:44
-->
<template>
	<div class="shape" :class="{ active }" style="width:200px;height:50px;">
		<div
			class="shape-point"
			v-for="item in (active? pointList : [])"
			:key="item"
			:style="getPointStyle(item)"
		></div>
		<slot></slot>
	</div>
</template>

<script>
export default {
	props: {
		active: {
			type: Boolean,
			default: false,
		},
		defaultStyle: {
			require: true,
			type: Object,
		},
	},
	data() {
		return {
			pointList: ["lt", "t", "rt", "r", "rb", "b", "lb", "l"], // 八个方向
			initialAngle: {
				// 每个点对应的初始角度
				lt: 0,
				t: 45,
				rt: 90,
				r: 135,
				rb: 180,
				b: 225,
				lb: 270,
				l: 315,
			},
			angleToCursor: [
				// 每个范围的角度对应的光标
				{ start: 338, end: 23, cursor: "nw" },
				{ start: 23, end: 68, cursor: "n" },
				{ start: 68, end: 113, cursor: "ne" },
				{ start: 113, end: 158, cursor: "e" },
				{ start: 158, end: 203, cursor: "se" },
				{ start: 203, end: 248, cursor: "s" },
				{ start: 248, end: 293, cursor: "sw" },
				{ start: 293, end: 338, cursor: "w" },
			],
			cursors: {},
		};
	},
	mounted() {},
	methods: {
		getPointStyle(point) {
			const { width, height } = this.defaultStyle;
			const hasT = /t/.test(point);
			const hasB = /b/.test(point);
			const hasL = /l/.test(point);
			const hasR = /r/.test(point);
			let newLeft = 0;
			let newTop = 0;

			// 四个角的点
			if (point.length === 2) {
				newLeft = hasL ? 0 : width;
				newTop = hasT ? 0 : height;
			} else {
				// 上下两点的点，宽度居中
				if (hasT || hasB) {
					newLeft = width / 2;
					newTop = hasT ? 0 : height;
				}

				// 左右两边的点，高度居中
				if (hasL || hasR) {
					newLeft = hasL ? 0 : width;
					newTop = Math.floor(height / 2);
				}
			}

			const style = {
				marginLeft: hasR ? "-4px" : "-4px",
				marginTop: "-4px",
				left: `${newLeft}px`,
				top: `${newTop}px`,
				cursor: this.cursors[point],
			};

			return style;
		},
	},
};
</script>

<style lang="scss" scoped>
.shape {
	position: absolute;
	&:hover {
		cursor: move;
	}
}
.active {
	outline: 1px dashed #70c0ff;
	user-select: none;
}
.shape-point {
	position: absolute;
	background: #fff;
	border: 1px solid #59c7f9;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	z-index: 1;
}
.icon-xiangyouxuanzhuan {
	position: absolute;
	top: -34px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 16px;
	font-weight: 600;
	cursor: grab;
	color: #59c7f9;
	font-size: 20px;
	font-weight: 600;
	&:active {
		cursor: grabbing;
	}
}
.icon-suo {
	position: absolute;
	top: 0;
	right: 0;
}
</style>